<template>
	<Modal
		:mask-closable="false"
		:title="`${$t('common.chooseQrCodePrint')}`"
		width="430px"
		v-model="printVisible"
		:footer-hide="true"
		class="modal-wrap-layout"
	>
		<Row>
			<!-- 条料标签 -->
			<Col :span="24" style="z-index: 999; height: 400px; overflow-y: scroll" v-if="type == '条料标签'">
				<section id="equipmentsprintOne">
					<table
						border="1px solid #000000"
						style="border-collapse: collapse; width: 10cm; height: 1.98cm"
						:class="['bigBorder', index != 0 ? 'mt16' : '']"
						v-for="(item, index) of record.printQuantity"
						:key="'a' + index"
					>
						<tr class="">
							<td class="title">规格</td>
							<td>{{ record.materialWidth }}</td>
							<td class="title">数量</td>
							<td>{{ record.packingQuantity }}</td>
							<td class="title">客户</td>
							<td>{{ record.materialCustom }}</td>
							<td class="qcode" colspan="5" rowspan="4">
								<div :id="`qrcode${index}`" :ref="`qrcode${index}`"></div>
							</td>
						</tr>
						<tr>
							<td class="title">日期</td>
							<td>{{ record.shiftTime }}</td>
							<td class="title">批号</td>
							<td>{{ record.batchNumber }}</td>
							<td class="title">工号</td>
							<td>{{ record.empno }}</td>
						</tr>
						<tr>
							<td class="title">料位</td>
							<td>{{ record.materialLevel }}</td>
							<td class="title">卷号</td>
							<td colspan="3">{{ record.volumeNumber }}</td>
						</tr>
						<tr>
							<td class="title">编号</td>
							<td>{{ record.materialCode }}</td>
							<td class="title">型号</td>
							<td colspan="3">{{ record.materialMark }}</td>
						</tr>
					</table>
				</section>
			</Col>
			<!-- 新厂产品标签 -->
			<Col :span="24" style="z-index: 999; height: 400px; overflow-y: scroll" v-if="type == '产品标签'">
				<section id="equipmentsprintOne">
					<table
						border="1px solid #000000"
						style="font-size: 10px; border-collapse: collapse; width: 10cm; height: 3.98cm"
						:class="['bigBorder', index !== 0 ? 'mt16' : '']"
						v-for="(item, index) of record.printQuantity"
						:key="'a' + index"
					>
						<tr class="">
							<td class="title">日期</td>
							<td colspan="2">{{ record.shiftTime }}</td>
							<td class="title">天数</td>
							<td colspan="1">{{ $moment(record.shiftTime).dayOfYear() }}</td>
							<!-- <td class="title">物料编号</td>
              <td style="width: 20px;">{{ record.materialCode }}</td>
              <td class="title">工号</td>
              <td style="width: 20px;">{{ record.empno }}</td> -->
							<td class="title">客户</td>
							<td colspan="2">{{ record.custom }}</td>
							<td class="qcode" rowspan="3">
								<div :id="`qrcode${index}`" :ref="`qrcode${index}`"></div>
							</td>
						</tr>
						<tr>
							<!-- <td class="title">生产日期</td>
              <td style="width: 20px;">{{ record.shiftTime }}</td>
              <td class="title">生产数量</td>
              <td style="width: 20px;">{{ record.packingQuantity }}</td> -->
							<td class="title">物料</td>
							<td colspan="3">{{ record.materialCode }}</td>
							<td class="title">名称</td>
							<td colspan="3">{{ record.materialName }}</td>
						</tr>
						<tr>
							<td class="title">模号</td>
							<td colspan="2">{{ record.moldCode }}</td>
							<td class="title">机台</td>
							<td colspan="2">{{ record.deviceCode }}</td>
							<td class="title">数量</td>
							<td colspan="1">{{ record.packingQuantity }}</td>
							<!-- <td class="title">销售订单号</td>
              <td style="width: 20px;">{{ record.orderCode }}</td>
              <td class="title">工序</td>
              <td style="width: 20px;">{{ record.productionProcesses }}</td>
              <td class="title">班次</td>
              <td colspan="2">{{ record.cla }}</td> -->
						</tr>
						<tr>
							<!-- <td class="title">工单</td>
              <td colspan="4">{{ record.workCode }}</td>
              <td class="title">图号</td>
              <td colspan="3">{{ record.customMaterialCode }}</td> -->
							<td class="title">工单</td>
							<td colspan="3">{{ record.workCode }}</td>
							<td class="title">后订</td>
							<td colspan="2">{{ record.subsequentOrder }}</td>
							<td class="title">后道</td>
							<td colspan="2">{{ record.subsequentProcess }}</td>
						</tr>
						<tr>
							<td class="title">牌号</td>
							<td colspan="3">{{ record.productGrade }}</td>
							<!-- <td class="title">模具</td>
              <td colspan="2">{{ record.assetCode }}</td> -->
							<td class="title">图号</td>
							<td colspan="2">{{ record.customMaterialCode }}</td>
							<td class="title">工号</td>
							<td colspan="2">{{ record.empno }}</td>
							<!-- <td class="title">后道工序</td>
              <td style="width: 20px;">{{ record.subsequentProcess }}</td> -->
							<!-- <td class="qcode" rowspan="2">品保判定</td>
              <td class="qcode" rowspan="2"></td> -->
						</tr>
						<tr>
							<td class="title">卷号</td>
							<td colspan="4">{{ record.volumeNumber }}</td>
							<td class="title">批次号(Lot)</td>
							<td colspan="3">{{ record.batchNumber }}</td>
						</tr>
					</table>
				</section>
			</Col>
			<!-- 不良品标签 -->
			<Col :span="24" style="z-index: 999; height: 400px; overflow-y: scroll" v-if="type == '不良品标签'">
				<section id="equipmentsprintOne">
					<table
						border="1px solid #000000"
						style="font-size: 10px; border-collapse: collapse; width: 10cm; height: 3.98cm"
						:class="['bigBorder', index !== 0 ? 'mt16' : '']"
						v-for="(item, index) of record.printQuantity"
						:key="'a' + index"
					>
						<tr class="">
							<!-- <td class="title">日期</td>
							<td colspan="2">{{ record.shiftTime }}</td>
							<td class="title">天数</td>
							<td colspan="1">{{ $moment(record.shiftTime).dayOfYear() }}</td> -->
							<td colspan="8">不良品标签</td>
							<td class="qcode" rowspan="3">
								<div :id="`qrcode${index}`" :ref="`qrcode${index}`"></div>
							</td>
						</tr>
						<tr>
							<!-- <td class="title">生产日期</td>
              <td style="width: 20px;">{{ record.shiftTime }}</td>
              <td class="title">生产数量</td>
              <td style="width: 20px;">{{ record.packingQuantity }}</td> -->
							<!-- <td class="title">物料</td>
							<td colspan="3">{{ record.materialCode }}</td> -->
							<td class="title">名称</td>
							<td colspan="3">{{ record.materialName }}</td>
							<td class="title">客户</td>
							<td colspan="3">{{ record.custom }}</td>
						</tr>
						<tr>
							<td class="title">模号</td>
							<td colspan="1">{{ record.moldCode }}</td>
							<td class="title">机台</td>
							<td colspan="2">{{ record.deviceCode }}</td>
							<td class="title">数量</td>
							<td colspan="2">{{ record.packingQuantity }}</td>
							<!-- <td class="title">销售订单号</td>
              <td style="width: 20px;">{{ record.orderCode }}</td>
              <td class="title">工序</td>
              <td style="width: 20px;">{{ record.productionProcesses }}</td>
              <td class="title">班次</td>
              <td colspan="2">{{ record.cla }}</td> -->
						</tr>
						<tr>
							<!-- <td class="title">工单</td>
              <td colspan="4">{{ record.workCode }}</td>
              <td class="title">图号</td>
              <td colspan="3">{{ record.customMaterialCode }}</td> -->
							<td class="title">工单</td>
							<td colspan="1">{{ record.workCode }}</td>
							<td class="title">图号</td>
							<td colspan="3">{{ record.customMaterialCode }}</td>
							<td class="title">牌号</td>
							<td colspan="3">{{ record.productGrade }}</td>
						</tr>
						<tr>
							<td class="title">物料</td>
							<td colspan="1">{{ record.materialCode }}</td>
							<!-- <td class="title">模具</td>
              <td colspan="2">{{ record.assetCode }}</td> -->
							<td class="title">工号</td>
							<td colspan="3">{{ record.empno }}</td>
							<td class="title">日期</td>
							<td colspan="3">{{ record.shiftTime }}</td>
							<!-- <td class="title">后道工序</td>
              <td style="width: 20px;">{{ record.subsequentProcess }}</td> -->
							<!-- <td class="qcode" rowspan="2">品保判定</td>
              <td class="qcode" rowspan="2"></td> -->
						</tr>
						<tr>
							<td class="title">卷号</td>
							<td colspan="2">{{ record.volumeNumber }}</td>
							<td class="title">批号</td>
							<td colspan="3">{{ record.batchNumber }}</td>
							<td class="title">天数</td>
							<td colspan="2">{{ $moment(record.shiftTime).dayOfYear() }}</td>
						</tr>
					</table>
				</section>
			</Col>
			<!-- 退火标签 -->
			<Col :span="24" style="z-index: 999; height: 400px; overflow-y: scroll" v-if="type == '退火标签'">
				<section id="equipmentsprintOne">
					<table
						border="1px solid #000000"
						style="font-size: 10px; border-collapse: collapse; width: 10cm; height: 3.98cm"
						:class="['bigBorder', index !== 0 ? 'mt16' : '']"
						v-for="(item, index) of record.printQuantity"
						:key="'a' + index"
					>
						<tr class="">
							<td class="title">日期</td>
							<td colspan="2">{{ record.shiftTime }}</td>
							<td class="title">客户</td>
							<td colspan="4">{{ record.custom }}</td>
							<td class="qcode" rowspan="3">
								<div :id="`qrcode${index}`" :ref="`qrcode${index}`"></div>
							</td>
						</tr>
						<tr>
							<td class="title">图号</td>
							<td colspan="2">{{ record.customMaterialCode }}</td>
							<td class="title">名称</td>
							<td colspan="4">{{ record.materialName }}</td>
						</tr>
						<tr>
							<td class="title">包数</td>
							<td colspan="3">{{ record.packages }}</td>
							<td class="title">数量</td>
							<td colspan="3">{{ record.packingQuantity }}</td>
					
							<!-- <td class="title">包规</td>
              <td colspan="2">{{ record.specificationsNumber }}</td> -->
						</tr>
						<tr>
							<td class="title1">工单</td>
							<td colspan="3">{{ record.workCode }}</td>
              <td class="title">工号</td>
							<td colspan="2">{{ record.empno }}</td>
							<td class="title">炉号</td>
							<td>{{ record.heatNumber }}</td>
						</tr>
						<tr>
              <td class="title">批次</td>
							<td colspan="3">{{ record.batchNumber }}</td>
							<td class="title">牌号</td>
							<td colspan="2">{{ record.customMark }}</td>
							<td class="title">油品</td>
							<td>{{ record.oilClassification }}</td>
					
						</tr>
						<tr>
							<td class="title">后订</td>
							<td colspan="3">{{ record.subsequentOrder }}</td>
							<td class="title">后道</td>
							<td colspan="2">{{ record.subsequentProcess }}</td>
              <td class="title">检验</td>
							<td>{{ record.customMarkCheck }}</td>
							
							<!-- <td class="title">批次号(Lot)</td>
              <td colspan="3">{{ record.batchNumber }}</td> -->
						</tr>
					</table>
				</section>
			</Col>
			<!-- 老厂产品标签 -->
			<Col :span="24" style="z-index: 999; height: 400px; overflow-y: scroll" v-if="type == '老厂产品标签'">
				<section id="equipmentsprintOne">
					<table
						border="1px solid #000000"
						style="font-size: 10px; border-collapse: collapse; width: 10cm; height: 3.98cm"
						:class="['bigBorder', index !== 0 ? 'mt16' : '']"
						v-for="(item, index) of record.printQuantity"
						:key="'a' + index"
					>
						<tr class="">
							<td class="title">日期</td>
							<td colspan="2">{{ record.shiftTime }}</td>
							<td class="title">工号</td>
							<td colspan="1">{{ record.empno }}</td>
							<td class="title">客户</td>
							<td colspan="2">{{ record.custom }}</td>
							<td class="qcode" rowspan="3">
								<div :id="`qrcode${index}`" :ref="`qrcode${index}`"></div>
							</td>
						</tr>
						<tr>
							<td class="title">物料</td>
							<td colspan="3">{{ record.materialCode }}</td>
							<td class="title">名称</td>
							<td colspan="3">{{ record.materialName }}</td>
						</tr>
						<tr>
							<td class="title">包数</td>
							<td colspan="2">{{ record.packages }}</td>
							<td class="title">内外模</td>
							<td colspan="1">{{ record.modelType == 1 ? '外' : record.modelType == 0 ? '内' : '' }}</td>
							<!-- <td class="title">包规</td>
              <td colspan="2">{{ record.specificationsNumber }}</td> -->
							<td class="title">数量</td>
							<td colspan="2">{{ record.packingQuantity }}</td>
						</tr>
						<tr>
							<td class="title">工单</td>
							<td colspan="4">{{ record.workCode }}</td>
							<td class="title">图号</td>
							<td colspan="3">{{ record.customMaterialCode }}</td>
						</tr>
						<tr>
							<td class="title">检验</td>
							<td colspan="3">{{ record.customMarkCheck }}</td>
							<td class="title">油品</td>
							<td colspan="2">{{ record.oilClassification }}</td>
							<td class="title">批次</td>
							<td colspan="2">{{ record.batchNumber }}</td>
						</tr>
						<tr>
							<td class="title">后订</td>
							<td colspan="2">{{ record.subsequentOrder }}</td>
							<td class="title">后道</td>
							<td colspan="2">{{ record.subsequentProcess }}</td>
							<td class="title">牌号</td>
							<td colspan="4">{{ record.customMark }}</td>
							<!-- <td class="title">批次号(Lot)</td>
              <td colspan="3">{{ record.batchNumber }}</td> -->
						</tr>
					</table>
				</section>
			</Col>
			<!-- 品管合格证 -->
			<Col style="z-index: 999; height: 400px; overflow-y: scroll" :span="24" v-if="type == '品管合格证'">
				<section id="equipmentsprintOne">
					<table
						border="1px solid #000000"
						style="font-size: 10px; border-collapse: collapse; width: 10cm; height: 5.98cm"
						:class="['bigBorder', index != 0 ? 'mt16' : '']"
						v-for="(item, index) of record.printQuantity"
						:key="'a' + index"
					>
						<tr class="">
							<td colspan="4" class="title">产品合格证</td>
						</tr>
						<tr>
							<td class="title">合同编号</td>
							<td>{{ record.contractNumber }}</td>
							<td class="title">包装编号</td>
							<td>{{ record.packagingNumber }}</td>
						</tr>
						<tr>
							<td class="title">产品名称</td>
							<td>{{ record.materialName }}</td>
							<td class="title">产品代号</td>
							<td colspan="3">{{ record.materialCode }}</td>
						</tr>
						<tr>
							<td class="title">材料牌号</td>
							<td>{{ record.materialMark }}</td>
							<td class="title">装箱数量</td>
							<td colspan="3">{{ record.packingQuantity }}</td>
						</tr>
						<tr>
							<td class="title">检验</td>
							<td>{{ record.customMarkCheck }}</td>
							<td class="title">检验日期</td>
							<td colspan="3">{{ record.testTime }}</td>
						</tr>
						<tr>
							<td class="title">备注</td>
							<td colspan="3">{{ record.remarks }}</td>
						</tr>
					</table>
				</section>
				<!-- <Row style="margin: 5px">
          <Col align="center">
            <span @click="hasPrint">
              <Button v-print="'#equipmentsprintOne'" type="primary"
                >选择打印</Button
              >
            </span>
          </Col>
        </Row> -->
			</Col>
			<Row style="margin: 5px">
				<Col align="center">
					<span @click="hasPrint">
						<Button ref="printBtn" type="primary" :loading="printLoading">选择打印</Button>
					</span>
					<Button v-show="false" id="printBtn" v-print="'#equipmentsprintOne'"> </Button>
				</Col>
			</Row>
		</Row>
	</Modal>
</template>

<script>
import QRCode from 'qrcodejs2';
import util from '@/util/util.js';

export default {
	name: 'ledgerPrintModal',
	data() {
		return {
			type: '',
			printVisible: false,
			record: [],
			timeValueList: [],
			modelType: '',
			printLoading: false,
		};
	},
	methods: {
		show(record, type, modelType) {
			this.timeValueList = [];
			this.printVisible = true;
			this.type = type;
			this.modelType = modelType;
			this.record = record;
			this.printDetail();
		},
		printDetail() {
			this.$nextTick(() => {
				for (let index = 0; index < this.record.printQuantity; index++) {
					const code = util.getUuid(14);
					this.prInterval(index, code);
				}
			});
		},
		readPrint() {
			this.printVisible = false;
			// this.$refs.printBtn.click();
		},
		hasPrint() {
			this.$emit('hasPrint');
			// this.printLoading=true;
		},
		getPrintDevice() {
			const btn = document.getElementById('printBtn');
			btn.click();
		},
		close() {
			this.printVisible = false;
			this.printLoading = false;
		},
		prInterval(index, time) {
			this.timeValueList.push(time);
			const text = `scene_01;${this.timeValueList.at(-1)}`;
			// const text = `scene_01;${this.timeValueList.at(-1)};${this.record.materialCode || ''};${this.record.packingQuantity || ''};${this.record.batchNumber || ''};${this.record.materialMark || ''}`;
			this.$refs[`qrcode${index}`][0].innerHTML = ''; //清除二维码方法一
			let qrcode = new QRCode(this.$refs[`qrcode${index}`][0], {
				text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
				width: 65,
				height: 65,
				colorDark: '#000000',
				colorLight: '#ffffff',
				correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
			});
			let logo = new Image();
			logo.crossOrigin = 'Anonymous';
			logo.src = require('@/assets/images/icon1.png');
			logo.onload = function () {
				let qrImg = qrcode._el.getElementsByTagName('img')[0];
				let canvas = qrcode._el.getElementsByTagName('canvas')[0];
				// let ctx = canvas.getContext("2d");
				// ctx.drawImage(logo, 150 * 0.5 - 33, 150 * 0.5 - 17, 66, 33);
				qrImg.src = canvas.toDataURL();
				qrImg.style.margin = '0 auto';
				// qrImg.style.margin="0 auto";
			};
		},
	},
};
</script>

<style media="print">
@page {
	size: auto;
	margin: 0.5mm;
}
</style>
<style lang="scss" scoped>
.bigBorder {
	border: 1px solid #1d1d1d;
	text-align: center;
	tr {
		// height: 5mm !important;
		td {
			padding: 0 !important;
			margin: 0 !important;
			min-width: 20px;
			font-size: 9px !important;
			border-top-width: 0;
			border-left-width: 0;
		}
	}
	.title {
		// line-height: 10px !important;
		min-width: 25px !important;
		max-width: 60px !important;
	}
	.qcode {
		min-width: 100%;
		// width: 20px;
		// height: 10px;
		align-items: center;
		// transform: scale(0.1);
		img {
			margin: 0 auto !important;
		}
	}
}
</style>
